// echarts 核心模块
import * as echarts from "echarts/core";
import { BarChart, BarSeriesOption } from "echarts/charts";
// 组件
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
import type { DatasetComponentOption } from "echarts/components";
// 标签自动布局, 全局过渡东话等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// canvas渲染器
import { CanvasRenderer } from "echarts/renderers";
import { useEffect, useRef } from "react";
import { ComposeOption } from "echarts/core";
import { Avatar, Card, Flex } from "antd";

type ECOption = ComposeOption<BarSeriesOption | DatasetComponentOption>;

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
]);

export default function Dashboard() {
  const chart1Ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const chart1 = echarts.init(chart1Ref.current);
    const option: ECOption = {
      tooltip: {},
      dataset: {
        source: [
          ["product", "2015"],
          ["1", 0],
          ["2", 2],
          ["3", 3],
        ],
      },
      xAxis: { type: "category" },
      yAxis: { type: "value" },
      series: [{ type: "bar" }],
    };
    chart1.setOption(option);

    return () => chart1.dispose();
  }, []);
  return (
    <>
      <Card>
        <Flex>
          <Avatar
            size={80}
            shape="circle"
            src="https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg"
          />
          <Flex>
            <div style={{ fontSize: "1.5rem" }}>
              早安, {"name"}, 开始您一天的工作吧!
            </div>
            <div></div>
          </Flex>
        </Flex>
      </Card>
      <div style={{ height: "500px", width: "500px" }} ref={chart1Ref}></div>
    </>
  );
}
